<template>
	<div class="preview-box">
		<div class="preview-content" v-html="props.content" :class="{ mobileContent: props.type === 'm_content' }"></div>
	</div>
</template>

<script setup lang="ts" name="personal">
import { reactive, ref, nextTick, defineAsyncComponent, onMounted } from 'vue';
import { topicDetail } from '/@/api/topic';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
const route = useRoute();

// 定义父组件向子组件传值
const props = defineProps({
	content: { type: String, required: true, default: '' },
  type: { type: String, required: true, default: '' },
});

// 定义变量内容
const state = reactive({});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	let appStyle = document.querySelector('#app');
	if (appStyle) {
		appStyle.style.overflow = 'auto';
	}
});

// const initData = () => {
// 	topicDetail(state.id).then((res: any) => {
// 		if (res.status === 'success') {
// 			state.content = res.data[state.type];
// 		}
// 	});
// };
</script>

<style scoped lang="scss">
.preview-box {
	width: 100%;
	display: flex;
	justify-content: center;
	.preview-content {
		min-height: calc(100vh - 250px);
		width: 1300px;
		padding: 0 20px;
		margin: 0 auto 20px;
		:deep img {
			width: 100% !important;
		}
	}
  .mobileContent {
    margin-top: 80px;
    background-color: #fff;
    width: 375px;
    height: 667px;
    overflow: auto;
  }
}
</style>
